```jsx
import * as scrollArea from "@zag-js/scroll-area"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

function ScrollArea() {
  const service = useMachine(scrollArea.machine, {
    id: createUniqueId(),
  })

  const api = createMemo(() => scrollArea.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div {...api().getViewportProps()}>
        <div {...api().getContentProps()}>
          {/* Your scrollable content here */}
        </div>
      </div>
      <div {...api().getScrollbarProps()}>
        <div {...api().getThumbProps()} />
      </div>
    </div>
  )
}
```
